<template>
	<view class="legal-item" @click.stop="handleClick">
		<u-row align="top">
      <u-col :span="6">
        <view class="legal-info">
          <view class="l-title">
            <text class="text">{{ name }}</text>
            <image src="../../static/icon/icon-v.png" mode="aspectFit" class="text-icon"></image>
          </view>
          <view class="l-indoc">
            <text class="text">数量 {{ number }} {{ tokenType }}</text>
            <text class="text">限额 {{ limits }} CNY</text>
          </view>
          <view class="pay-methods">
            <block v-for="(item, index) in payment" :key="index">
              <text class="text">{{ item }}</text>
              <u-line color="#999" direction="col" length="20rpx" margin="0 10rpx" v-if="payment.length !== 1 && index !== payment.length - 1" />
            </block>
          </view>
        </view>
      </u-col>
      <u-col :span="6" align="right">
        <view class="r-info">
          <text>成交量 {{ volume }}</text>
          <!-- <u-line color="#999" direction="col" length="20rpx" margin="0 10rpx" /> -->
          <!-- <text>成交率 {{ volumeRate }}%</text> -->
        </view>
        <view class="r-price">
          <text class="r-strong">￥{{ price }}</text>
          <text class="r-small"> /{{ tokenType }}</text>
        </view>
        <view class="r-payoper">
          <text class="text" v-if="!cond">暂不满足{{ type == 0 ? '卖家' : '买家' }}设置的条件</text>
          <u-button type="primary" v-else :custom-style="{
            'width': '200rpx',
            'margin': '0 0 0 auto',
            'height': '60rpx',
            'border-radius': '0'
          }"
          @click="handle">
          {{ cancel ? '取消委托' : type == 0 ? '去购买' : '去出售' }}
          </u-button>
        </view>
      </u-col>
    </u-row>
	</view>
</template>

<script>
	export default {
    props: {
      name: {
        type: String,
        default: ''
      },
      number: {
        type: [String, Number],
        default: ''
      },
      tokenType: {
        type: String,
        default: ''
      },
      limits: {
        type: [String, Number],
        default: ''
      },
      volume: {
        type: [String, Number],
        default: ''
      },
      volumeRate: {
        type: [String, Number],
        default: ''
      },
      price: {
        type: [String, Number],
        default: ''
      },
      type: {
        type: Number,
        default: 0
      },
      payment: {
        type: Array,
        default () {
          return []
        }
      },
      cond: {
        type: Boolean,
        default: true
      },
      cancel: {
        type: Boolean,
        default: false
      }
    },
		data() {
			return {
				
			};
		},
    methods: {
      handleClick () {
        this.$emit('click')
      },
      handle () {
        this.$emit('handle')
      }
    }
	}
</script>

<style lang="scss">
.legal-item {
  padding: 30rpx;
  border-bottom: 1rpx solid $color-theme;
}
.legal-info {
  position: relative;
  .l-title {
    font-size: 32rpx;
    color: $text-color;
    display: flex;
    align-items: center;
    .text-icon {
      width: 42rpx;
      height: 42rpx;
      margin-left: 6rpx;
    }
  }
  .l-indoc {
    font-size: 24rpx;
    color: $color-theme;
    display: flex;
    flex-direction: column;
    padding: 10rpx 0;
    .text {
      padding: 3rpx 0;
    }
  }
  .pay-methods {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    padding-top: 14rpx;
    color: #5493fb;
  }
}
.r-info {
  display: flex;
  font-size: 24rpx;
  color: #939393;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10rpx;
}
.r-price {
  color: $theme;
  padding: 16rpx 0 0;
  font-weight: bold;
  .r-strong {
    font-size: 34rpx;
  }
  .r-small {
    font-size: 24rpx;
  }
}
.r-payoper {
  padding-top: 20rpx;
  font-size: 24rpx;
  color: #999;
  .text {
    padding-top: 24rpx;
  }
}
</style>
